<template>
    <div class="box" style="display:flex;flex-direction:colum;">
      <h2 style="text-align:center;height:40px;line-height:40px;color:#fff;background:#000;display:flex" class="h2"><span @click="back">＜返回</span><b>购物车</b></h2>
        <div class="content" v-if="isLogin">
        <router-link  :to="{name:'utils',params:{proid:item.proid}}" tag="li" v-for="item of cartlist" :key="item.proid" style="display:flex;background:#fafafa;margin-bottom:10px;">
         <input type='checkbox' v-model="item.flag"  @change='changeFlag(item)'   style='margin:auto 8px;'><van-card
  :num="item.num"
  :tag="item.brand"
  :price="item.price"
  :desc="item.title"
  :title="item.title"
  :thumb="item.proimg"
>

</van-card>
<div style="display:flex;flex-direction:colum;padding:40px 0;width:100%;position: relative;">
<button @click="reduce(item)" style="border:0;width:40%;height:70%;background:#e7e7e7">-</button><span style="padding:1px 0;">{{item.num}}</span><button @click="add(item)" style="border:0;width:40%;height:70%;background:#e7e7e7">+</button>
<button @click='deleteitem(item, index)' style="position:absolute;bottom:4px;right:20px;border:0;background:#fff;border:1px solid #f7f7f7;color:red;font-size:14px;">删除</button>
</div>
 </router-link>
        <div id="footer">
          <van-submit-bar
  :price="totalPrice"
  button-text="提交订单" @submit="submitOrder"
>
  <van-checkbox v-model="all" @change="selectAll" style="margin-left:8px;margin-top:2px;" shape="square" checked-color="red">全选</van-checkbox>
  <span slot="tip">
    确认订单在提交, <router-link to='/address' tag='span'>修改地址</router-link>
  </span>
</van-submit-bar>
        </div>
        </div>
      <div v-else style="height:100%;width:100%;background:#ededed;padding:25% 0 20% 2%">
        <div style="text-align: center;">
                       <div><img src="@/assets/购物吧.png" alt="" ></div>
                       <div><van-button color="linear-gradient(to right, #c79, #f77 )" @click="goumai">去购买商品</van-button></div>
                     </div>
      </div>
    </div>
</template>

<script>
import axios from 'axios'
import Vue from 'vue'
import {
  GoodsAction,
  GoodsActionIcon,
  GoodsActionButton,
  Card,
  Toast,
  Checkbox,
  CheckboxGroup,
  SubmitBar,
  Button
} from 'vant'
Vue
  .use(GoodsAction)
  .use(GoodsActionIcon)
  .use(GoodsActionButton)
Vue.use(Card)
Vue.use(Button)
Vue.use(Toast)
Vue.use(SubmitBar)
Vue.use(Checkbox).use(CheckboxGroup)
export default {
  data () {
    return {
      cartlist: [],
      arr: [],
      flag: false,
      all: false,
      isLogin: false
    }
  },
  created () {
    // let ywx = document.querySelector('.van-button__text')
    // console.log(ywx)
    // let token = localStorage.getItem('token')
    let userid = localStorage.getItem('userid')
    console.log(userid)
    let url = '/cart?userid=' + userid
    axios.get(url).then(res => {
      console.log(res)
      if (res.data === '没有数据') {
        this.isLogin = false
      } else {
        this.isLogin = true
        let arr = res.data.data
        console.log(arr)
        arr.map((res) => {
          res.flag = false
        })
        arr[arr.length - 1].flag = true
        if (arr.length === 1) {
          this.all = true
        }
        this.cartlist = arr
        // console.log(res)
      }
    })
  },
  // mounted () {
  //   let ywx = document.querySelector('.van-button__text')
  //   // console.log(ywx)
  //   // ywx.onclick = submitOrder()
  //   ywx.addEventListener('click', submitOrder, false)
  // },
  methods: {
    reduce (item) {
    //   let token = localStorage.getItem('token')
      let num = item.num > 1 ? --item.num : 1
      axios.get('/cart/updata?num=' + num + '&cartid=' + item.cartid).then(res => {
        if (res.data.code === '10119') {
          this.$router.push('/login')
        } else {
          item.num = num
        }
      })
    },
    back () {
      this.$router.push('/kind')
    },
    goumai () {
      this.$router.push('/home')
    },
    add (item) {
      console.log(2323)
      //   let token = localStorage.getItem('token')
      let num = ++item.num
      console.log(num)
      axios.get('/cart/updata?num=' + num + '&cartid=' + item.cartid).then(res => {
        if (res.data.code === '10119') {
          this.$router.push('/login')
        } else {
          item.num = num
        }
      })
    },
    deleteitem (item, index) {
    //   let token = localStorage.getItem('token')
      axios.get('/cart/delete?userid=' + item.userid + '&proid=' + item.proid).then(res => {
        if (res.data === '10119') {
          this.$router.push('/login')
        } else {
          this.cartlist.splice(index, 1)
          Toast('已从购物车移除此商品')
        }
      })
      axios.get('/cart?userid=' + localStorage.getItem('userid')).then(res => {
        if (res.data === '没有数据') {
          this.isLogin = false
        }
      })
    },
    changeFlag (item) {
      if (item.flag) {
        let b = this.cartlist.every(res => {
          return res.flag === true
        })
        if (b) {
          this.all = true
        } else {
          this.all = false
        }
      } else {
        this.all = false
      }
    },
    selectAll () {
      if (this.all) {
        Toast('已选择所有的商品')
        this.cartlist.map((res) => {
          res.flag = true
        })
      } else {
        Toast('请选择你要购买的商品')
        this.cartlist.map((res) => {
          res.flag = false
        })
      }
    },
    submitOrder () {
      this.arr = []
      this.cartlist.map(item => {
        if (item.flag) {
          this.arr.push(item)
        }
      })
      console.log('yy', this.arr)
      if (this.arr.length === 0) {
        Toast('请先添加商品')
        return
      }
      axios.get('/order/add?str=' + JSON.stringify(this.arr) + '&userid=' + localStorage.getItem('userid')).then(res => {
        console.log('ywx', res.data)
        console.log(res.data.orderid)
        let orderid = res.data.data.orderid
        let userid = localStorage.getItem('userid')
        this.$router.push('/details?userid=' + userid + '&orderid=' + orderid + '&status=0')
      })
    }
  },
  computed: {
    totalNum () {
      let num = 0
      this.cartlist.map((item) => {
        item.flag ? num += item.num : num += 0
      })
      return num
    },
    totalPrice () {
      let price = 0
      this.cartlist.map((item) => {
        item.flag ? price += item.num * item.price : price += 0
      })
      return price * 100
    }
  }
}
</script>
<style lang="scss">
@import '@/lib/reset.scss';
.h2{
      span{
      display: inline-block;
      text-indent: 10px;
    }
    b{
      display: inline-block;
      @include flex(2);
      text-align: left;
      text-indent: 1.2rem;
    }
}
.van-card__content{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    .van-card__title {
        width: 150px;
    }
    .van-card__desc {
      width: 150px;
    }
}
</style>
